<template>
  <div>
    <!-- 搜索框 -->
    <input 
      v-model="searchQuery" 
      @input="filterItems" 
      type="text" 
      placeholder="搜索..."
      class="search-input"
    />
    
    <!-- 新增按钮 -->
    <button @click="openAddModal" class="add-button">新增</button>

    <!-- 表格 -->
    <table class="table">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in filteredItems" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>
            <button @click="openDetailModal(item)">查看详情</button>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- 详情弹框 -->
    <ModalComponent 
      :showModal="showDetailModal"
      :title="`${selectedItem.name}的详情`"
      @close="closeDetailModal"
    >
      <template v-slot:default>
        <div>
          <p><strong>ID:</strong> {{ selectedItem.id }}</p>
          <p><strong>姓名:</strong> {{ selectedItem.name }}</p>
          <p><strong>年龄:</strong> {{ selectedItem.age }}</p>
        </div>
      </template>
    </ModalComponent>

    <!-- 新增弹框 -->
    <ModalComponent 
      :showModal="showAddModal"
      title="新增用户"
      @close="closeAddModal"
    >
      <template v-slot:default>
        <div>
          <label for="name">姓名:</label>
          <input v-model="newItem.name" id="name" type="text" />
          <label for="age">年龄:</label>
          <input v-model.number="newItem.age" id="age" type="number" />
        </div>
      </template>

      <template v-slot:footer>
        <button class="modal-default-button" @click="addItem">添加</button>
        <button class="modal-default-button" @click="closeAddModal">取消</button>
      </template>
    </ModalComponent>
  </div>
</template>

<script>
import ModalComponent from './components/ModalComponent.vue';

export default {
  components: {
    ModalComponent
  },
  data() {
    return {
      items: [
        { id: 1, name: '张三', age: 25 },
        { id: 2, name: '李四', age: 30 },
      ],
      searchQuery: '',
      filteredItems: [],
      showDetailModal: false,
      showAddModal: false,
      selectedItem: {},
      newItem: {
        id: null,
        name: '',
        age: null
      },
      nextId: 3 // 假设我们已经有了两个项目，所以下一个id是3
    }
  },
  created() {
    // 初始化过滤后的列表
    this.filteredItems = this.items;
  },
  methods: {
    filterItems() {
      const query = this.searchQuery.toLowerCase();
      this.filteredItems = this.items.filter(item => 
        item.name.toLowerCase().includes(query) || 
        item.age.toString().includes(query)
      );
    },
    openDetailModal(item) {
      this.selectedItem = item;
      this.showDetailModal = true;
    },
    closeDetailModal() {
      this.showDetailModal = false;
    },
    openAddModal() {
      // 重置表单数据
      this.newItem = { id: this.nextId++, name: '', age: null };
      this.showAddModal = true;
    },
    closeAddModal() {
      this.showAddModal = false;
    },
    addItem() {
      if (this.newItem.name.trim() !== '' && this.newItem.age !== null) {
        this.items.push(this.newItem);
        this.filterItems(); // 更新过滤后的列表
        this.closeAddModal();
      }
    }
  }
}
</script>

<style scoped>
/* 重置一些默认样式 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 基础样式 */
body {
  font-family: 'Arial', sans-serif;
  background-color: #f4f4f9;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

/* 搜索框和新增按钮样式 */
.search-input {
  width: 300px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  margin-right: 10px;
  transition: border-color 0.3s;
}

.search-input:focus {
  border-color: #007BFF;
  outline: none;
}

.add-button {
  background-color: #007BFF;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.add-button:hover {
  background-color: #0056b3;
}

/* 表格样式 */
.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  background-color: white;
  border-radius: 5px;
  overflow: hidden;
}

.table th, .table td {
  padding: 15px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.table th {
  background-color: #007BFF;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
}

.table td {
  color: #333;
}

.table tr:nth-child(even) {
  background-color: #f8f9fa;
}

.table tr:hover {
  background-color: #e9ecef;
}

.table button {
  background-color: #28a745;
  color: white;
  padding: 8px 12px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.table button:hover {
  background-color: #218838;
}

/* 弹框样式 */
.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity .3s ease;
}

.modal-wrapper {
  width: 400px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
  transition: all .3s ease;
  padding: 20px;
}

.modal-header h3 {
  margin-top: 0;
  color: #007BFF;
}

.modal-body {
  margin: 20px 0;
}

.modal-default-button {
  background-color: #007BFF;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.modal-default-button:hover {
  background-color: #0056b3;
}
</style>